<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>

<body>
    <center>
        <h3>聊天</h3>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" id="username" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>用户编号：</td>
                <td><input type="text" id="userBh" placeholder="请输入用户编号"></td>
            </tr>
            <tr style="text-align: center;">
                <td><button onclick="connect()">连接</button></td>
                <td><button onclick="wsClose()">断开连接</button></td>
            </tr>
            <tr>
                <td><input type="text" id="message" placeholder="请输入您要发送的信息"></td>
                <td><button onclick="send()">发送</button></td>
            </tr>
        </table>

        <h3>内容</h3>
        <div id="content">
            <!-- <p style="background-color: darkseagreen; color: black; text-align: left; padding-left: 20px;">test <br /> test</p> -->
        </div>
    </center>

    <script>

        let ws = null;

        function connect() {
            userBh = document.getElementById("userBh").value
            username = document.getElementById("username").value

            if (!userBh || !username) {
                alert("没有请输入正确的信息");
                return;
            }

            url = `ws://localhost:8090/websocket/connect/${userBh}/${username}`

            ws = new WebSocket(url)
            ws.onopen = function (event) {
                console.log("onopen", event)
            }

            ws.onmessage = function (event) {
                console.log("onmessage", event)
                body = JSON.parse(event?.data)
                if (body.type && body.type != 1) {
                    return
                }
                sendUserName = body?.sendUserXm
                sendUserBh = body?.sendUserBh
                sendMsg = body?.msg
                if (userBh != sendUserBh) {
                    document.getElementById("content").innerHTML += `<p style="background-color: darkseagreen; color: black; text-align: left; padding-left: 20px;">[${sendUserBh}] ${sendUserName} <br />${sendMsg}</p>`
                }

            }

            ws.onclose = function (event) {
                console.log("onclose", event)
            }

            ws.onerror = function (event) {
                console.log("onerror", event)
            }
        }

        function send() {
            try {
                if (!ws) {
                    alert("请先连接好再发送请求")
                    return;
                }

                message = document.getElementById("message").value
                if (!message) {
                    alert("发送信息不能为空")
                    return;
                }

                ws.send(message)
                document.getElementById("content").innerHTML += `<p style="text-align: right; padding-right: 20px;background-color: aquamarine; color: black;">${message}</p>`

            } catch (err) {
                console.log(err)
            }
        }

        function wsClose() {
            console.log("ws", ws)
            if (!ws) {
                alert("没有连接可以断开")
                return;
            }

            ws.close()
            ws = null
            alert("连接以成功断开")
        }

    </script>

</body>

</html>